import React, { forwardRef } from 'react';
import { cn } from '@/lib/utils';

// 编辑输入框属性接口
interface EditInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
  // 是否显示错误状态
  error?: boolean;
  // 错误信息
  errorMessage?: string;
  // CSS类名
  className?: string;
  // 容器CSS类名
  containerClassName?: string;
}

/**
 * 编辑输入框组件
 * 专门用于集合标题编辑的输入框，仅显示下边界，支持错误状态显示
 *
 * @example
 * // 基础用法
 * <EditInput
 *   value={title}
 *   onChange={handleChange}
 *   placeholder="输入标题..."
 * />
 *
 * // 带错误状态
 * <EditInput
 *   value={title}
 *   error={true}
 *   errorMessage="标题不能超过12个字符"
 *   onChange={handleChange}
 * />
 */
export const EditInput = forwardRef<HTMLInputElement, EditInputProps>(({
  error = false,
  errorMessage,
  className,
  containerClassName,
  id,
  name,
  ...props
}, ref) => {
  // 生成默认的id和name属性，确保无障碍性
  const inputId = id || 'edit-input';
  const inputName = name || 'edit';
  return (
    // 编辑输入框容器（relative 以便错误提示绝对定位，不改变布局高度）
    <div className={cn('flex flex-col relative', containerClassName)}>
      {/* 编辑输入框 */}
      <input
        ref={ref}
        id={inputId}
        name={inputName}
        type="text"
        className={cn(
          // 基础：固定行高与高度，避免编辑态行高变化
          'bg-transparent outline-none border-0 px-0 py-0 min-w-[200px] h-7 leading-7',
          // 字体样式（保持与非编辑态标题一致）
          'text-xl font-semibold text-gray-900 dark:text-gray-100',
          error
            ? 'border-b-2 border-red-400 focus:border-red-500'
            : 'border-b-2 border-gray-300 focus:border-gray-500',
          // 过渡效果
          'transition-colors duration-200',
          // 移除浏览器默认样式
          'focus:outline-none focus:ring-0 focus:shadow-none',
          // 自定义样式
          className
        )}
        {...props}
      />

      {/* 错误信息提示：绝对定位到输入下方，不占据布局空间，避免父容器高度变化 */}
      {error && errorMessage && (
        <span
          className={cn(
            'absolute left-0 top-full translate-y-1 text-xs text-red-500 px-0 pointer-events-none z-10'
          )}
        >
          {errorMessage}
        </span>
      )}
    </div>
  );
});

// 设置组件显示名称，便于调试
EditInput.displayName = 'EditInput';
